<template>
  <div class="home">
    <el-button type="primary" plain @click="$router.go(-1)">返回</el-button>
    <el-input-number
      v-model="num"
      :min="0"
      :max="10"
      :precision="0"
      :step="1"
      @change="changeNum"
    ></el-input-number>
    <hello-world
      :trendsNum="num"
      :multiHeaderContent="multiHeaderContent"
      :tableList="tableList"
    ></hello-world>
  </div>
</template>

<script>
import HelloWorld from "@/components/TrendsColumn/index.vue";
export default {
  components: { HelloWorld },
  data() {
    return {
      drawer: true,
      num: 0,
      direction: null,
      // 多属性表头内容
      multiHeaderContent: [
        { name: "序号", key: "index" },
        { name: "姓名", key: "name" },
      ],
      tableList: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
      ],
    };
  },
  methods: {
    changeNum(e) {
      let form = {};
      for (let i = 1; i <= e; i++) {
        form["key" + i] = 0;
      }
      let tableListZeroForm = this.tableList.map((item) => {
        return { ...item, ...form };
      });
      this.tableList = tableListZeroForm;
    },
  },
};
</script>

<style lang="scss" scoped>
// 这里可以编写 SCSS 样式
</style>
